.scroll-on-page {
  $base-line-height: 1.5em !default;
  $base-spacing: 1.5em !default;
  $action-color: #477DCA !default;
  $dark-gray: #333 !default;
  $large-screen: 53.75em !default;
  $base-font-color: $dark-gray !default;

  display: inline-block;

  a {
    color: $action-color;
    text-decoration: none;
  }

  aside {
    @include media($large-screen) {
      @include span-columns(4);
    }
  }

  .scroll-on-page-link {
    border-bottom: 1px solid transparentize($action-color, 0.8);
    display: block;
    margin-right: $base-spacing;
    outline: none;
    padding: ($base-spacing / 2) 0;

    &:last-child {
      margin-bottom: $base-spacing;
    }
  }

  article {
    h4 {
      margin: 0 0 0.5em 0;
    }

    p {
      color: $base-font-color;
      line-height: $base-line-height;
    }

    section p:last-of-type {
      margin-bottom: 2em;
    }

    @include media($large-screen) {
      @include span-columns(8);
    }
  }
}

// Based on code by http://codepen.io/xmark/
